<template>
  <div class="Login">
    <a-form :form="form" class="login-form">
      <a-form-item>
        <h2 class="white">AIBox合作伙伴后台管理系统</h2>
      </a-form-item>
      <a-form-item>
        <p class="subtitle white">大象便利智能售货柜</p>
      </a-form-item>
      <div class="card">
        <a-form-item>
          <a-input v-decorator="['userName']" placeholder="账户名">
            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-decorator="['password']" type="password" placeholder="密码">
            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input class="verificationCode" v-decorator="['verificationCode']" placeholder="验证码">
            <a-icon slot="prefix" type="safety-certificate" style="color: rgba(0,0,0,.25)" />
          </a-input>
          <a href="javascript:;" class="codeImg" @click="changeCodeImg()">
            <img :src="codeImg" alt="图片加载失败" />
          </a>
        </a-form-item>
        <a-form-item>
          <a-checkbox
            v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          }
        ]"
          >记住密码</a-checkbox>
        </a-form-item>
        <a-button type="primary" @click="loginData()">登陆</a-button>
      </div>
    </a-form>
    <div class="bottom">
      <div class="one white">
        <span>帮助</span>
        <span>隐私</span>
        <span>条款</span>
      </div>
      <p class="two white">Copyright 2019南京乐贤智能科技有限公司</p>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  name: "Login",
  data() {
    return {
      form: this.$form.createForm(this),
      codeImg: ""
    };
  },
  methods: {
    // 获取登录验证码图片
    changeCodeImg() {
      this.num = Math.ceil(Math.random() * 10);
      console.log(this.num);
      this.codeImg =
        this.baseUrl + `/agentBackend/loginCode?clientId=${this.num}`;
    },
    // 登录 返回登录接口数据
    loginData() {
      var values = this.form.getFieldsValue();
      if (!values.userName) {
        this.$message.warning("账户名不能为空");
      } else if (!values.password) {
        this.$message.warning("密码不能为空");
      } else if (!values.verificationCode) {
        this.$message.warning("验证码不能为空");
      } else {
        this.axios
          .post(this.baseUrl + "/agentBackend/login", {
            clientId: this.num,
            code: values.verificationCode,
            password: md5(values.password),
            username: values.userName
          })
          .then(response => {
            // console.log(response);
            this.logininfo = response.data.data;
            this.loginToken = this.logininfo.loginToken;
            this.nickname = this.logininfo.nickname;
            this.photoImg = this.logininfo.photoImg;
            this.username = this.logininfo.username;
            this.$store.commit("loginToken", this.loginToken);
            this.$store.commit("nickname", this.nickname);
            this.$store.commit("photoImg", this.photoImg);
            if (response.data.code !== 0) {
              this.$message.error("账号或密码错误");
            } else {
              this.$router.push({
                path: "/home"
              });
              this.$message.info("登录成功");
            }
          });
      }
    }
  },
  created() {
    this.changeCodeImg();
  },
  mounted() {}
};
</script>

<style scoped>
.white {
  color: aliceblue;
}

.card {
  padding: 10% 10% 10% 10%;
  background: white;
}
.Login {
  /* display: block; */
  width: 100%;
  height: 100%;
  position: relative;
  background: url("../../assets/agent_bg@2x.png");

  background-size: cover;
}
.login-form {
  width: 26%;
  height: 550px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ant-btn-primary {
  width: 100%;
  height: 40px;
}
h2 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.5rem;
}
.subtitle {
  text-align: center;
}
.ant-input-affix-wrapper {
  height: 40px;
}
.verificationCode {
  width: 60%;
}
.bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  /* width: 500px; */
  height: 50px;
  transform: translate(-50%, -50%);
  text-align: center;
}
.bottom .one {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bottom p {
  margin-top: 20px;
}
.codeImg {
  margin-left: 8%;
  display: inline-block;
  height: 100%;
  width: 30%;
  text-align: center;
}
.codeImg img {
  width: 100%;
}
</style>